<template>
  <div class="chart-main-content">
    <!-- {{items}} -->
    <el-card style="height:390px">
      <div ref="chart" class="chart"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    queryData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    this.$nextTick(() => {
      this.myChart = this.$echarts.init(this.$refs.chart);
      if (this.myChart) {
        this.show();
      }
    });
  },
  mounted() {
    let _this = this;
    window.onresize = function () {
      _this.myChart.resize();
    };
  },

  methods: {
    show() {
      let items2=  JSON.parse(JSON.stringify(this.items))
      console.log(items2);
      let finish = items2[0];
      let total = items2[2];
      let unfinish = items2[1]

      let option = {
        title: {
          text: "提交工单统计",
        },
        //提示框组件
        tooltip: {
          //触发类型：坐标轴触发
          trigger: "axis",
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          //坐标轴指示器：指示坐标轴当前刻度的工具。
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        legend: {
          data: ["工单总数", "未结束", "已结束"],
        },
        toolbox: {
          feature: {
            saveAsImage: {}, //保存图片
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "工单总数",
            type: "line",
            data: total,
          },
          {
            name: "未结束",
            type: "line",
            data: unfinish,
          },
          {
            name: "已结束",
            type: "line",
            data: finish,
          },
        ],
      };
      //echarts对象绑定配置选项
      if (this.myChart) {
        this.myChart.setOption(option);
      }
    },
  },
  watch: {
    items: {
      deep: true,
      immediate: true,
      handler: function () {
        this.show();
      },
    },
    queryData: {
      deep: true,
      immediate: true,
      handler: function () {
        this.show();
      },
    },
  },
};
</script>

<style scoped>
.chart-main-content {
  width: 99%;
  margin: 0 auto;
}
.chart {
  /* width: 90%;
  
  display: flex; */
  /* justify-content: center; */
  margin: 0 auto;
  height: 350px;
}
</style>
